<template>
  <div class="mv_detail">
    <div class="left">
      <h4 style="line-height: 40px;color: #2a2727;cursor: pointer" @click="goRouter"><span style="font-size: 18px"> < </span>MV详情</h4>
<!--      视频播放区域-->
      <video width="650px" height="350px" autoplay :src="mvUrl" controls="controls"
             style="background-color: black;padding-top: 10px">
        很抱歉,您的浏览器当前不支持最新播放标签!
      </video>
<!--      歌手-->
      <div class="user-info">
        <img v-if="curMv.artists" @click="goSingerPage" :src="curMv.artists[0].img1v1Url" alt="">
        <span  v-if="curMv.artists" style="color: #3e3c3c;margin-left: 5px">{{curMv.artists[0].name}}</span>
      </div>
<!--      视频名称-->
      <div class="mv-name">
        <div>{{curMv.name}}</div>
        <i v-show="!visible" @click="changeVisible" class="tri_bottom"></i>
        <i v-show="visible" @click="changeVisible" class="tri_top"></i>
      </div>
<!--      其他信息-->
      <div style="font-size: 12px;color: #a9a9bb">
        <span>发布: {{curMv.publishTime}}</span>
        <span style="margin-left: 20px">播放: {{(curMv.playCount/10000).toFixed()}}万次</span>
      </div>
<!--      视频描述-->
      <div v-show="visible" class="desc">{{curMv.desc}}</div>
<!--      操作-->
      <div class="operate">
        <div class="play">
          <img src="~@/assets/img/footer/liked.svg" alt="">
          <span>赞</span>
        </div>
        <div class="collect">
          <img src="~@/assets/img/songlistdetail/collect.svg" alt="">
          <span>收藏({{curMv.subCount}})</span>
        </div>
        <div class="share">
          <img src="~@/assets/img/songlistdetail/share.svg" alt="">
          <span>分享({{curMv.shareCount}})</span>
        </div>
        <div class="download">
          <img src="~@/assets/img/songlistdetail/download.svg" alt="">
          <span>下载mv</span>
        </div>
      </div>
<!--      评论区-->
      <h4 style="line-height: 40px;color: #2a2727;cursor: pointer">评论<span>({{curMv.commentCount}})</span></h4>
      <div class="detail_bottom">
        <div v-if="currentPage === 0 && hotComments.length !== 0">
          <p class="comment_title">精彩评论</p>
          <div class="comment_box" v-for="(item, index) in hotComments" :key="index">
            <div class="comment_left">
              <img v-lazy="item.user.avatarUrl" alt="">
            </div>
            <div class="comment_right">
              <div class="comment_info1">
                <span class="nickname_common">{{item.user.nickname}}:</span>
                {{item.content}}
              </div>
              <div class="comment_info2" v-if="item.beReplied.length !== 0">
                <span class="nickname_common">@{{item.beReplied[0].user.nickname}}:</span>
                {{item.beReplied[0].content}}
              </div>
              <div class="comment_other">
                <span>{{showTime(item.time)}}</span>
                <img src="~@/assets/img/footer/liked.svg" alt="">
                <span>{{item.likedCount}}</span>
              </div>
            </div>
          </div>
          <div class="more_goodComment">更多精彩评论</div>
        </div>
        <div>
          <p class="comment_title">最新评论({{total}})</p>
          <div class="comment_box" v-for="(item, index) in comments" :key="index">
            <div class="comment_left">
              <img v-lazy="item.user.avatarUrl" alt="">
            </div>
            <div class="comment_right">
              <div class="comment_info1">
                <span class="nickname_common">{{item.user.nickname}}:</span>
                {{item.content}}
              </div>
              <div class="comment_info2" v-if="item.beReplied.length !== 0">
                <span class="nickname_common">@{{item.beReplied[0].user.nickname}}:</span>
                {{item.beReplied[0].content}}
              </div>
              <div class="comment_other">
                <span>{{showTime(item.time)}}</span>
                <img src="~@/assets/img/footer/liked.svg" alt="">
                <span>{{item.likedCount}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      分页按钮-->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="15"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <div class="right" v-if="simiMv.length !== 0">
<!--      相似mv/视频-->
      <h4 style="line-height: 40px;color: #2a2727;">相关推荐</h4>
      <div v-for="(item, index) in simiMv"
           :key="index"
           style="display: flex"
      >
        <div class="itemInfo">
          <img v-lazy="item.cover" @click="goMvDetail(item)" alt="">
          <div class="playCount">
            <img style="width: 20px;height:20px;position: relative;top: -4px;" src="~@/assets/img/home/play-m.svg" alt="" >
            <div>{{ (item.playCount/10000).toFixed()}}</div>
            <span>万</span>
          </div>
          <div class="duration">{{item.duration | duration}}</div>
        </div>
        <div style="flex: 1;margin-left: 4px">
          <div style="font-size: 14px;color: #2a2727;margin-top: 15px; display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                      overflow: hidden;">
            {{item.name}}
          </div>
          <div style="font-size: 13px;margin-top: 45px;color: #a9a9bb">by {{item.artistName}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {home} from "@/network/home";
  import {format, formatDate} from "@/components/common/utilis";


  export default {
    name: "MvDetail",
    data(){
      return {
        curMv:{}, //当前mv数据
        mvUrl:'', //mv播放地址
        simiMv:[],  //相似mv
        hotComments:[], //热门评论
        comments:[], //普通评论
        visible:false, //用来判断描述内容是否隐藏
        currentPage: 0, //当前页
        total:0,        //评论数量

      }
    },
    filters:{
      // 格式化歌曲时间
      duration(value){
        return format(value/1000)
      },
    },
    created() {
      //获取mv数据
      this.getMvDetail(this.$route.params.id)
      //获取mv播放地址
      this.getMvUrl(this.$route.params.id)
      //获取相似mv
      this.getSimiMv(this.$route.params.id)
      //获取热门评论
      this.getHotComment(this.$route.params.id)
      //获取mv普通评论
      this.getMvComment(this.$route.params.id)
    },
    watch:{
      '$route.params.id'(){
        //监听当前id是否变化,变化的话更新数据
        this.getMvDetail(this.$route.params.id)
        this.getMvUrl(this.$route.params.id)
        this.getSimiMv(this.$route.params.id)
        this.getHotComment(this.$route.params.id)
        this.getMvComment(this.$route.params.id)
      },
    },
    methods:{
      //返回上一路由
      goRouter(){
        this.$router.go(-1)
      },
      //点击歌手图片跳转到到歌手页
      goSingerPage(){
        this.$router.push('/album/id=' + this.curMv.artistId)
      },
      goMvDetail(item){
        this.$router.push('/mvdetail/id=' + item.id)
      },
      //隐藏/显示描述内容
      changeVisible(){
        this.visible = !this.visible
      },
      //格式化评论发表的时间
      showTime(value){
        const date = new Date(value)
        return formatDate(date, 'yyyy年MM月dd日  hh:mm')
      },
      //点击分页切换页数的函数
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getMvComment(this.$route.params.id,this.currentPage * 15)
      },

      //获取mv数据
      getMvDetail(mvid){
        home.getMvDetail(mvid).then(res => {
          this.curMv = res.data.data
        })
      },
      //获取mv播放地址
      getMvUrl(mvid){
        home.getMvUrl(mvid).then(res => {
          this.mvUrl = res.data.data.url
        })
      },
      //获取相似mv
      getSimiMv(mvid){
        home.getSimiMv(mvid).then(res => {
          this.simiMv = res.data.mvs
        })
      },
      //获取热门评论
      getHotComment(mvid, offset){
        home.getHotComment(mvid, 1, offset).then(res => {
          this.hotComments = res.data.hotComments
        })
      },
      //获取mv普通评论
      getMvComment(mvid, offset){
        home.getMvComment(mvid, offset).then(res => {
          this.comments = res.data.comments
          this.total = res.data.total
        })
      },



    },
  }
</script>

<style scoped>
.mv_detail{
  width: 90%;
  position: absolute;
  top: 44px;
  left: 137px;
  bottom: 50px;
  right: 2px;
  padding: 10px 80px;
  overflow-y: scroll;
  display: flex;
}
.left{
  width: 650px;
}
.user-info{
  padding: 10px 0;
}
.user-info img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
}
.user-info span{
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}
.mv-name{
  display: flex;
  line-height: 30px;
  font-size: 19px;
  color: #2a2727;
  font-weight: 700;
  padding: 10px 0;
}
.mv-name .tri_top{
  margin-bottom: 11px;
  margin-left: 10px;
  border: 7px solid transparent;
  border-bottom: 7px solid #454141;
}
.mv-name .tri_bottom{
  margin-top: 12px;
  margin-left: 10px;
  border: 7px solid transparent;
  border-top: 7px solid #454141;
}
.desc{
  margin: 10px 0;
  line-height: 20px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.operate{
  display: flex;
  padding: 15px 0;
}
.operate>div{
  margin:6px 8px;
  font-size: 14px;
  color: #2a2727;
  padding: 4px 16px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid #c1b8b8;
}
.operate>div:hover{
  background-color: rgba(0,0,0,.05);
}
.operate .play{
  margin-left: 0;
}
.operate .play img{
  width: 14px;
  height: 14px;
}
.operate img{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.operate span{
  vertical-align: middle;
}
/*相关推荐*/
.right{
  margin-left: 30px;
}
.itemInfo{
  width: 60%;
  margin-bottom: 5px;
  position: relative;
}
.itemInfo img:nth-child(1){
  width: 100%;
  height: 110px;
  border-radius: 7px;
  cursor: pointer;
}
.itemInfo p{
  font-size: 14px;
  color: rgb(92, 81, 81);
  line-height: 20px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.playCount{
  position: absolute;
  top: 5px;
  right: 5%;
  display: flex;
  font-size: 12px;
  color: white;
}
.duration{
  position: absolute;
  right: 5%;
  top: 92px;
  font-size: 14px;
  color: #F4F4F4;
}
/*评论区*/
.comment{
  margin-left: 65px;
  margin-right: 100px;
}
.comment_box{
  display: flex;
  width: 650px;
  padding: 20px 0;
  margin: 0 auto;
  font-size: 13px;
  border-bottom: 1px solid #E1E1E5;
}
.comment_left{
  width: 80px;
}
.comment_left img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 25px;
  margin-top: 7px;
}
.comment_right{
  flex: 1;
  line-height: 22px;
}
.nickname_common{
  color: #5070d0;
}
.comment_title{
  color: #2a2727;
  font-weight: 550;
  margin-left: 20px;
  margin-top: 20px;
}
.more_goodComment{
  width: 120px;
  font-size: 14px;
  line-height: 33px;
  margin: 30px auto;
  text-align: center;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid #b0b0b6;
  background-color: #ffffff;
}
.comment_info2{
  padding: 5px 10px;
  margin: 5px 0;
  background-color: rgba(104, 94, 94, .1);
}
.comment_other{
  display: flex;
  padding: 8px 0;
}
.comment_other img{
  width: 18px;
  margin-right: 5px;
  margin-left: 350px;
  cursor: pointer;
}


/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
